<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="uft-8">
    <title>案例研究: 图片库改进版</title>
</head>
<body>
<ul>
    <li>
        <a href="images/fireworks.png" title="A fireworks display"
           onclick="!showPic(this);"
           onkeypress="!showPic(this);">
            Fireworks
        </a>
    </li>
</ul>
<script>
    function addEventHandler() {
        function prepareGallery() {
            if (!document.getElementsByTagName) {
                return false;
            }
            if (!document.getElementById) {
                return false;
            }

            function or() {
                if (!document.getElementsByTagName || !document.getElementById) {
                    return false;
                }
            }

            function orAgain() {
                var supported = document.getElementsByTagName && document.getElementById;
                if (!supported) {
                    return false;
                }
            }

            var gallery = document.getElementById('image-gallery');
            if (!gallery) {
                return false;
            }

            var links = gallery.getElementsByTagName('a');
            for (var i = 0; i < links.length; i++) {
                links[i].onclick = function () {
                    return showPic(this);
                };
            }

            function showPic(whichpic) {
                // TODO
            }
        }

        function firstFunction() {

        }

        function secondFunction() {

        }

        function onloadHandler() {

        }

        window.onload = prepareGallery;

        window.onload = firstFunction;
        window.onload = secondFunction;

        window.onload = function () {
            firstFunction();
            secondFunction();
        };

        function sharedEvents() {
            function addLoadEvent(fn) {
                var oldOnload = window.onload;
                if (typeof window.onload != 'function') {
                    window.onload = fn;
                } else {
                    window.onload = function () {
                        oldOnload();
                        fn();
                    }
                }
            }

            addLoadEvent(firstFunction);
            addLoadEvent(secondFunction);
        }
    }

    function notTooManyAssumptions() {
        function showPic(whichpic) {
            var source = whichpic.getAttribute('href');
            var placeholder = document.getElementById('placeholder');
            placeholder.setAttribute('src', source);
            var text = whichpic.getAttribute('title');
            var description = document.getElementById('description');
            description.firstChild.nodeValue = text;
        }

        function updateAfter() {
            function showPic(whichpic) {
                var source = whichpic.getAttribute('href');
                var placeholder = document.getElementById('placeholder');
                if (!placeholder) {
                    return false;
                }
                placeholder.setAttribute('src', source);
                var description = document.getElementById('description');
                if (!description) {
                    description.firstChild.nodeValue = whichpic.getAttribute('title');
                }
            }
        }
    }

    function optimize() {
        var whichpic = document.createElement('a');
        var text = whichpic.getAttribute('title');
        if (!text) {
            // TODO
        } else {
            text = '';
        }

        function or() {
            var text = whichpic.getAttribute('title') ? whichpic.getAttribute('title') : '';
        }

        var placeholder = document.createElement('img');
        if (placeholder.nodeName != 'IMG') {
            return false;
        }

        var description = document.createElement('div');
        if (description.firstChild.nodeValue == 3) {
            description.firstChild.nodeValue = text;
        }
    }

    function keyboard() {
        var links = gallery.getElementsByTagName('a');
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = function () {
                return !showPic(this);
            };
            links[i].onkeypress = function () {
                return !showPic(this);
            };
        }

        function better() {
            var links = gallery.getElementsByTagName('a');
            for (var i = 0; i < links.length; i++) {
                links[i].onclick = function () {
                    return !showPic(this);
                };
                links[i].onkeypress = links[i].onclick;
            }
        }
    }
</script>
</body>
</html>